<template>
  <div class="container">
    <Category title="游戏">
      <template slot-scope="{games}"><!--使用作用域插槽，结构外部必须包一个template,使用scope属性,值使用{}包起来,里面写传值时写的属性-->
        <ul>
          <li v-for="(game,index) in games" :key="index">
            {{game}}
          </li>
        </ul>
      </template>
    </Category>
    <Category title="电影">
      <template slot-scope="{films}">
        <ol>
          <li v-for="(film,index) in films" :key="index">
            {{film}}
          </li>
        </ol>
      </template>
    </Category>
    <Category title="美食">
      <template scope="{foods}">
          <h4 v-for="(food,index) in foods" :key="index">
            {{food}}
          </h4>
      </template>
    </Category>
  </div>
</template>

<script>
  import Category from "@/components/Category";
  export default {
    name: 'App',
    components: {
      Category
    },
    data(){
      return{
/*        foods:['火锅','烧烤','小龙虾','牛排'],
        films:['《老师，好！》','《救世主》','《拆弹专家》','《我是特种兵》'],
        games:['超级玛丽','血战上海滩','七龙珠','赛尔号']*/
      }
    }
  }
</script>

<style>
  .container,.foot{
    display: flex;
    justify-content: space-around;
  }
  video{
    width: 100%;
  }
  img{
    width: 100%;
  }
</style>
